<template>
  <!-- 机构的卡卷 -->
  <u-popup v-model="show" mode="bottom" border-radius="14" height="70%" class="coupon-wrapper">
    <view class="coupon-title">卡券</view>
    <view class="coupon-list" :data-theme="globPrimary">
      <scroll-view scroll-y="true" class="coupon-scroll">
        <view class="item" v-for="(out, listIndex) in couponList" :key="listIndex">
          <view class="title">{{ out.coupon_type_text }}</view>
          <!-- #ifdef H5 -->
          <u-row
            class="ticket"
            :class="couponBgColorClass[item.coupon_type]"
            v-for="(item, index) in out.list"
            :key="item.id"
          >
            <view class="left">
              <view class="top" v-if="item.coupon_type == 1">
                {{ setting.appMoneySymbol }}
                <text class="big">{{ parseFloat(item.price) }}</text>
                满{{ parseFloat(item.maxprice) }}减{{ parseFloat(item.price) }}
              </view>
              <view class="top" v-else-if="item.coupon_type == 2">
                <text class="big">{{ parseFloat(item.discount) }}折</text>
              </view>
              <view class="top" v-else-if="item.coupon_type == 3"
                ><text class="big">课程卡</text></view
              >
              <view class="type u-line-1" v-if="item.coupon_type == 3"
                >仅限{{ item.course_title }}使用</view
              >
              <view class="type u-line-1" v-else>仅限{{ item.school_name }}使用</view>
              <view class="date u-line-1">
                有效期{{ item.use_stime | timeFormat('yyyy.mm.dd') }}至{{
                  item.use_etime | timeFormat('yyyy.mm.dd')
                }}
              </view>
            </view>
            <u-row justify="center" class="right">
              <view class="use active" :round="true" v-if="item.user_has == 1">已领取</view>
              <view class="use" :round="true" v-else @click="useCoupon(item.id, listIndex, index)"
                >领取
              </view>
            </u-row>
          </u-row>
          <!-- #endif -->

          <!-- #ifndef H5 -->
          <view
            class="ticket"
            style="display: flex"
            :class="couponBgColorClass[item.coupon_type]"
            v-for="(item, index) in out.list"
            :key="item.id"
          >
            <view class="left">
              <view class="top" v-if="item.coupon_type == 1">
                ￥
                <text class="big">{{ parseFloat(item.price) }}</text>
                满{{ parseFloat(item.maxprice) }}减{{ parseFloat(item.price) }}
              </view>
              <view class="top" v-else-if="item.coupon_type == 2">
                <text class="big">{{ parseFloat(item.discount) }}折</text>
              </view>
              <view class="top" v-else-if="item.coupon_type == 3"
                ><text class="big">课程卡</text></view
              >
              <view class="type u-line-1" v-if="item.coupon_type == 3"
                >仅限{{ item.course_title }}使用</view
              >
              <view class="type u-line-1" v-else>仅限{{ item.school_name }}使用</view>
              <view class="date u-line-1">
                有效期{{ item.use_stime | timeFormat('yyyy.mm.dd') }}至{{
                  item.use_etime | timeFormat('yyyy.mm.dd')
                }}
              </view>
            </view>
            <view class="right" style="display: flex; align-items: center; justify-content: center">
              <view class="use active" :round="true" v-if="item.user_has == 1">已领取</view>
              <view class="use" :round="true" v-else @click="useCoupon(item.id, listIndex, index)"
                >领取
              </view>
            </view>
          </view>
          <!-- #endif -->
        </view>
      </scroll-view>
    </view>
    <view class="coupon-btn" @click="closeCoupon">确定</view>
  </u-popup>
</template>

<script>
import setting from '@/settings/projectSetting.js'
import { mapGetters } from 'vuex'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    coureId: {
      type: [Number, String],
    },
  },
  data() {
    return {
      setting,
      typeClass: {
        1: 'video',
        2: 'live',
        3: 'multipart',
        4: 'classes',
      },
      couponBgColorClass: {
        1: 'youhui',
        2: 'dazhe',
        3: 'kecheng',
      },
      couponList: [],
      show: false,
    }
  },
  watch: {
    show(n) {
      this.$emit('update:visible', n)
    },
    visible(n) {
      this.show = n
    },
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      hasLogin: 'user/getHasLogin',
    }),
  },
  mounted() {
    if (this.hasLogin) {
      // 获取卡卷
      this.$edu.api
        .getCourseCoupon({
          // course_id: this.$route.query.id,
          course_id: this.coureId,
          group: 1,
        })
        .then((res) => {
          let data = res.data
          // 过滤空
          data = data.filter((item) => !this.$u.test.empty(item.list))
          this.couponList = data
        })
    }
  },

  methods: {
    useCoupon(id, l, i) {
      this.$edu.api
        .postCourseCouponDerive(id)
        .then((res) => {
          this.$u.toast(res.msg)
          this.couponList[l].list[i].user_has = 1
          this.couponList = Object.assign([], this.couponList)
        })
        .catch((res) => {
          this.$u.toast(res.msg)
        })
    },
    closeCoupon() {
      this.show = false
    },
  },
}
</script>

<style lang="scss" scoped>
.coupon-wrapper {
  .coupon-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #303133;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .coupon-scroll {
    height: 100%;
  }

  .coupon-list {
    padding: 0 30rpx;
    height: calc(100% - 192rpx);

    .item {
      & + .item {
        margin-top: 45rpx;
      }

      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: #909399;
      }
    }

    .ticket {
      margin-top: 32rpx;
      background-image: var(--bg-img);
      background-size: cover;
      background-repeat: no-repeat;

      .left {
        width: 70%;
        padding: 20rpx 25rpx;
        color: var(--main-color);

        .top {
          font-size: 28rpx;

          .big {
            font-size: 40rpx;
            font-weight: 400;
            margin-right: 10rpx;
          }
        }

        .type {
          font-size: 24rpx;
          margin-top: 18rpx;
        }

        .date {
          margin-top: 6rpx;
          font-size: 24rpx;
        }
      }

      .right {
        width: 30%;
        /* #ifdef MP-WEIXIN || APP-PLUS */
        overflow: hidden;
        /* #endif */
        .use {
          /* #ifdef MP-WEIXIN || APP-PLUS */
          margin-left: 30rpx;
          /* #endif */
          width: 150rpx;
          height: 68rpx;
          border-radius: 34rpx;
          border-width: 2rpx;
          border-style: solid;
          color: #ffff;
          font-size: 30rpx;
          line-height: 64rpx;
          text-align: center;
          border-color: var(--main-color);
          background-color: var(--main-color);

          &.active {
            color: var(--main-color);
            border-color: transparent;
            background-color: transparent;
          }
        }
      }

      &.youhui {
        --main-color: #ff8a52;
        --bg-img: url('@/pageCourse/static/images/youhuiquan.png');
      }

      &.dazhe {
        --main-color: #ff9431;
        --bg-img: url('@/pageCourse/static/images/dazhe_bg.png');
      }

      &.kecheng {
        --main-color: #67c23a;
        --bg-img: url('@/pageCourse/static/images/kechengka.png');
      }
    }
  }

  .coupon-btn {
    height: 72rpx;
    border-radius: 36px;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    margin: 10rpx 55rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    @include bg-color();
  }
}
</style>
